<template>
  <!-- 绑定学生 -->
  <div class="page">
    <!-- search -->
    <div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
      <div
        class=""
        @click="popBack()"
      >
        <i
          class="iconfont icon-arrow-left"
          style="font-size: 16px;font-weight: bold;"
        ></i>
      </div>
      <div style="margin-left: 12px;
				flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;
				height: 30px;border-radius: 15px;padding-right: 12px;">
        <div
          class="iconfont icon-sousuo"
          style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;"
        >
        </div>
        <input
          type="text"
          value=""
          placeholder="请输入关键字搜索"
          style="font-size: 14px;flex: 1;background-color: #f1f1f1;border: none;"
        />
        <div style="width: 1px;height: 14px;background-color: #999999;margin-right: 12px;" />
        <div style="font-size: 12px;color: #007AFF;padding:0 5px;width: 30px;text-align: center;">搜索</div>
      </div>
    </div>

    <div
      style="flex:1;background-color: #f5f5f5;height:100vh;display: flex;justify-content: center;align-items: center;"
      v-if="list.length == 0"
    >
      <div style="font-size: 14px;color: #999999;">暂无数据</div>
    </div>
    <!-- list -->
    <div
      style="flex: 1;background-color: #FFFFFF;overflow-y: auto;padding: 12px;padding-top: 0;"
      v-else
    >
      <!-- cell -->
      <div
        style="padding: 12px;background-color: #FFFFFF;border-radius: 8px;border: 1px solid #ebebeb;margin-top: 5px;"
        v-for="(item,idx) in list"
        :key="idx"
        @click="cellClickHandle(item)"
      >
        <div style="display: flex;justify-content: space-between;">
          <div>
            <span style="font-size: 14px;font-weight: bold;">{{item.projectName}}</span>
            <span style="font-size: 12px;color: #999999;margin-left: 12px;">{{item.school}}</span>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
          <span style="font-size: 12px;color: #999999;">{{item.schName}}</span>
        </div>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
          <span style="font-size: 12px;color: #999999;">{{item.projectAddress}}</span>
        </div>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
          <span style="font-size: 12px;color: #999999;">负责人：{{item.responsiblePersonName}}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { projectList } from "../../api/project";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.netStuBuspList();
  },
  methods: {
    popBack() {
      this.$router.back();
    },
    netStuBuspList() {
      let fi = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        stuName: this.keywd,
      };
      let self = this;
      projectList(fi)
        .then((res) => {
          let { data } = res;
          let { record } = data;
          self.list = record;
        })
        .catch((e) => {});
    },
    cellClickHandle(item) {
      this.$router.push({
        name: "personinfo-selectcorse",
        params: item,
      });
    },
  },
};
</script>

<style scoped>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #3f536e;
}
</style>